<template>
  <span>
    <template v-if="readonly">
      {{ value_display2 }}
    </template>

    <template v-else>
      <!-- todo edit: datetime,{{ fieldInfo.type }}
      {{ value_display }}    {{ value2 }} -->

      <ODatePicker
        v-model="value2"
        :placeholder="node.placeholder || node.string"
        :show-time="true"
        @change="onChange2"
      />
    </template>
  </span>
</template>

<script setup>
import ODatePicker from '@/odoojs-antdv/OInput/ODatePicker.vue'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'

import { computed } from 'vue'

import { useWidget } from './userWidget'

dayjs.extend(utc)

const props = defineProps(['modelValue', 'node', 'formInfo'])
const emit = defineEmits(['update:modelValue', 'change'])

const useData = useWidget(props, { emit })

const { fieldInfo, readonly } = useData
const { onChange } = useData

const value_display = computed(() => {
  const fname = props.node.name
  const { record = {} } = props.formInfo || {}
  const val = record[fname]

  return val
})

const value_display2 = computed(() => {
  const val = value_display.value
  const val2 = utc2local(val)
  return val2
})

const value2 = computed({
  get() {
    const val = props.modelValue
    const val2 = utc2local(val)
    return val2
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

function utc2local(str) {
  if (str) {
    const dt = dayjs.utc(str)
    const str2 = dt.local().format('YYYY-MM-DD HH:mm:ss')
    return str2
  }

  return str
}

function onChange2(value) {
  // console.log('onChange  ', value)
  if (value) {
    const dt = dayjs(value)
    const str2 = dt.utc().format('YYYY-MM-DD HH:mm:ss')
    onChange(str2)
  } else {
    onChange(false)
  }
}
</script>

<style type="text/css"></style>
